<template>
  <div>
    <el-dialog
    :title="!row ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
      <el-form :model="dataForm" ref="dataForm" label-width="80px">
        <el-form-item label="题目：">
          <el-input type='textarea' v-model="dataForm.title"></el-input>
        </el-form-item>
        <el-form-item label="答案：">
          <el-radio-group v-model="dataForm.answer">
              <el-radio v-for="(item,index) in dataForm.options" :key="index" :label="index+1">选项{{index+1}}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item
          v-for="(o, index) in dataForm.options"
          :label="'选项' + (index+1) + '：'"
          :key="index"
        >
          <el-input type='textarea' v-model="o.wz" style="width: 80%"></el-input>
          <el-button @click.prevent="removeOpt(index)" class="f-left">删除</el-button>
          <el-upload
            :action="url"
            :limit="1"
            :on-success="videoUploadSuccess"
            :on-exceed="handleExceed"
            :file-list="fileList[index]"
            :before-upload="beforeUpload">
            <el-button size="small" type="primary" @click="clickVal(index)">添加图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button @click="addOption()">添加选项</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {treeDataTranslate} from '@/utils'
  export default {
    data () {
      return {
        row: '',
        url: '',
        visible: false,
        fileList: [],
        dataForm: {
          title: '',
          answer: 1,
          options: [{
            wz: ''
          }]
        },
        optIndex: 0
      }
    },
    methods: {
      init (row) {
        this.row = row
        this.fileList = []
        if(row) {
          this.dataForm = row
        }else {
          this.dataForm = {
            title: '',
            answer: 1,
            options: [{
              wz: ''
            }]
          }
        }
        this.url = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
        this.visible = true
        if(row) {
          this.$nextTick(() => {
            //回显
            row.options.forEach((element,index) => {
              this.fileList[index] = []
              if(element.img){
                let nameList = element.img.split('/');
                let name = nameList[nameList.length-1]
                this.fileList[index].push({name,url: element.img})
                this.dataForm.options[index].img = element.img
              }
            });
            //解决push不更新视图的问题
            this.fileList.sort()
          })

        }
      },
      addOption() {
        let l = this.dataForm.options.length
        if(l<4) {
          this.dataForm.options.push({
            wz: ''
          })
        }else {
          this.$message({
            message: '最多可添加4个选项',
            type: 'warning',
            duration: '1500'
          });
        }
      },
      removeOpt(i) {
        this.dataForm.options.splice(i, 1) 
      },
      //上传
      clickVal(index) {
        this.optIndex = index
      },
      videoUploadSuccess (response){
        if (response.code === 0) { //状态码 成功
          this.dataForm.options[this.optIndex].img = response.url
        }
      },
      handleExceed () {
        this.$message.warning(`最多上传一个视频`)
      },
      beforeUpload (file) {
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
      },
      dataFormSubmit() {
        this.$emit('refreshDataList',this.dataForm,this.row)
        this.visible = false
      }
    }
  }
</script>

<style scope>
  .f-left {
    float: right;
  }
</style>